<template>
  <div class="layout-design-card overflow-hidden cursor-pointer"
       :style="{backgroundColor:bg}">
    <div v-for="i in options"
         :key="i"
         @click="toggle(i)"
         :class="['layout-design-card-item relative flex items-center' ,currentValue === i ? 'justify-between':'justify-center']">
      <template v-if="currentValue === i">
        <span class="layout-design-card-item--active inline-block"></span>
        <span class="layout-design-card-item--active inline-block"></span>
        <span class="layout-design-card-item--active inline-block"></span>
      </template>

      <span class="layout-design-card-item--dot inline-block"
            v-else></span>
    </div>
  </div>
</template>

<script>
const options = Object.freeze(['top-left', 'top-center', 'top-right', 'center-left', 'center-center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right'])

export default {
  name: 'LayoutDesignCard',
  props: {
    bg: {
      type: String,
      default: '#ffffff'
    },
    value: true
  },
  data () {
    return {
      options
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    toggle (item) {
      this.currentValue = item
    }
  }
}
</script>

<style lang="scss" scoped>
.layout-design-card {
  display: grid;
  width: 114px;
  height: 114px;
  border-radius: 7px;
  border: 2px solid rgba(0, 0, 0, 0.06);
  grid-gap: 6px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  &-item {
    padding: 6px 5px;
    &--dot {
      width: 4px;
      height: 4px;
      background: rgba(0, 0, 0, 0.61);
      border-radius: 50%;
    }
    &--active {
      width: 6.3px;
      height: 100%;
      background-color: #0043ce;
      border-radius: 1px;
    }
  }
}
</style>
